<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<style>
			div {
				color: red;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="student" v-for="(item,key,index) in students">
				<div class="name">{{key}}:{{item.name}}</div>
				<div class="age">{{key}}:{{item.age}}</div>
				<div class="gender">{{key}}:{{item.gender}}</div>
				<hr>
			</div>
			<div v-v-for="i in num">
				<span v-for="j in i" style="margin-right: 20px;">
					{{j}}*{{i}}={{i*j}}
				</span>
			</div>
		</div>

		<script>
			new Vue({
				el: '#app',
				data() {
					return {
						num: 9,
						students: [{
							name: 'dog',
							age: 19,
							gender: 'female'
						}, {
							name: 'cat',
							age: 19,
							gender: 'female'
						}, {
							name: 'duck',
							age: 19,
							gender: 'male'
						}]
					}
				}
			})
		</script>
	</body>
</html>
